Chip 2000 February

home *** CD-ROM | disk | FTP | other *** search

/ Chip 2000 February / CHIPCD_2_2000.iso / cult3d / Cult3D Folder / Web / cdexplorer / MFCB5.tmp < prev next >

Wrap

Text File | 1999-11-02 | 32KB | 573 lines

<html> <head> <title>EXPLORER</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript">  </script> </head> <BODY TOPMARGIN="0" LEFTMARGIN="0" bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"> <div id="Layer1" style="position:absolute; left:5px; top:2px; width:471px; height:303px; z-index:1"> Tutorial: Glider (a movement exercise). 1 What kind of program is Cult3D? Cult3D is the new multi-platform 3D object-rendering engine. It is a 100% software product. No additional hardware-such as 3D accelerator cards-is required. As a desktop or notebook user, you can now view 3D objects in real time, a capability formerly found only on high-end workstations. Cult3D gives internet users the opportunity to view high-quality 3D objects online on most platforms. All actions and interactions in the model are defined by events. An event can be a pressed key, timer expiring, mouse button clicked, etc. Events are generated by such actions as play sound, play animation, go to URL, etc. You can also add Java code to manage more complex sequences of actions. The Cult3D Designer can edit and extend the objects and animations exported by the Cult3D Exporter in the *.c3d file, in order to define and add more complex sub-animations (such as interpolation-morphing-between two different frames in the animation.) 2 How does Cult 3D work? The Cult3D Designer is an application for adding the interactivity to your already modelled 3D object. You can add animations, sounds, links, Java code, clickable areas, and movement patterns to the object. If you use a Cult3D Exporter plugin for you favourite 3D modelling/animation software, you can export the data as a Cult3D Designer file [*.c3d] and load it in Cult3D Designer. After editing the object, Cult3D Designer saves the presentation as a Cult3D Designer file [*.c3d] (for the object data) and a Cult3D Project file [*.c3p] (for project information and references to external resources such as sound and Java code). Once you are satisfied that the presentation is complete, you save it as a Cult3D Player file [*.co] for the Cult3D Player plugin to play. Cult3D Designer creates a compressed binary file with the extension *.co that can be published locally or on the net. Here is an example of a typical project made into a 3D presentation using Cult3D Designer. <img src="glider/glider1.jpg" width="310" height="170"> Use your 3D-modelling package and take either an existing model or create a new from scratch. The result is going to be much better with a model that is well-balanced between enough detail to show what is going on, and being small enough to load and render fast. <img src="glider/Image2.jpg" width="365" height="217"> Once you are satisfied with the way the model looks in your 3D modelling application, you can export it to a Cult3D Designer file [*.c3d]. This is the file format used to maintain a Cult3D object by Cult3D Designer. <img src="glider/Image3.jpg" width="365" height="195"> You can now edit the object in the Cult3D Designer by adding events, actions, sounds, etc. You can preview the end-user's view of the object inside Cult3D Designer. Then save the object back into a Cult3D Designer file [*.c3d] in order to make changes possible in the future. <img src="glider/Image4.jpg" width="365" height="156"> Now you may create the file that the end-user will actually view. This Cult3D Player file [*.co] is compressed and heavily optimised to reduce file size. It also allows the Cult3D Player to start displaying the contents. Important <img src="glider/Image5.jpg" width="20" height="20"> <ul> Make sure that you have saved your object as a Cult3D Designer file [*.c3d]. Once you have created a Cult3D Player file [*.co] you can not convert it back into editable data or even open it in Cult3D Designer. This allows Cult3D to truly optimise the file for viewing and throw away all the editing information. It also protects your model from modifications by others. <li>Only persons in possession of the Cult3D Designer file [*.c3d] can modify the object and create a fresh Cult3D Player file [*.co]. </li> <li>It is very important to keep the original file name of the designer file after you have created a project file. If you change the name of the designer file after you have created a project then the project file can't be executed.</li> </ul> <img src="glider/Image6.jpg" width="365" height="261"> Now you may place the Cult3D Player file [*.co] where the user can access it, (a web server, a file server or the user's local disk) and then make a link to it. <hr> Example: You have a Cult3D Player file [*.co] named plan-40.co. The snippet to access it might look like below. <table width="470" border="1" cellspacing="0" cellpadding="2" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#000000"> <tr bordercolor="#E3E3E3"> <td> <object align="CENTER" classid="clsid:31B7EB4E-8B4B-11D1-A789-00A0CC6651A8" width="500" height="275" border="1" codebase="http://www.cult3d.com/download/cult.cab#version=3,1,0,1"> <param name="SRC" value="plan-40.co"> <embed pluginspage="http://www.cult3d.com/newuser/index.html" src="plan-40.co" width="500" height="275" color="000000" type="application/x-cult3d-object"> </embed> <param name="BGCOLOR" value="000000"> </object> </td> </tr> </table> 3 How do I start working with the tutorial file? Task 1: Start Cult 3D and open the file Minidisc.c3d <ol> <li>Click the start button. </li> <li>Choose Program and Cult 3D Designer to start. </li> <li>Choose Open in the File menu. </li> <li>Select the file Minidisc.c3d and click Open</li> </ol> 3.1 What do I see on the screen? The Cult3D Designer main work area consists of six different subwindows: Event Map, Object Properties, Actions, Events, Scene Graph and Preview. <img src="glider/eventmap.jpg" width="470" height="354"> Event Map-window An event is used to trigger an action. An event can be a left mouse click, a right mouse click or a middle mouse click. It can also be a pressed or released key on the keyboard. Events specify the input that triggers or drives the actions in the scene. The list below shows the different types of events that can be used in the Event map window. <table border="0" cellspacing="0" cellpadding="0" width="470"> <tr valign="top"> <td width="13%" height="56"><img src="glider/ikon1.gif" width="46" height="47"></td> <td width="87%" height="56">World Start This event is triggered when the scene loads. </td> </tr> <tr valign="top"> <td width="13%" height="53"><img src="glider/ikon2.gif" width="42" height="46"></td> <td width="87%" height="53">World Stop Occurs when you quit the scene, i.e., load another scene. </td> </tr> <tr valign="top"> <td width="13%" height="164"><img src="glider/ikon3.gif" width="46" height="34"></td> <td width="87%" height="164">World Step Gets triggered every time that the scene gets rendered, which normally happens about 30 or 15 times per second. All this depends on the users computer and the scene/object running. If for instance the object is small and uses very few polygons, then this event can get triggered up to 200 times per second. This event is useful to call Java actions which have real time constraints or things that should continuously happen. </td> </tr> <tr valign="top"> <td width="13%" height="73"><img src="glider/ikon4.gif" width="45" height="47"></td> <td width="87%" height="73">Timer The event is triggered after an author definable duration. By double-clicking the timer icon you can change the delay. The delay time is dependent on the speed of the processor. </td> </tr> <tr valign="top"> <td width="13%"><img src="glider/ikon5.gif" width="44" height="40"></td> <td width="87%" rowspan="3"> [Left, Middle, Right] Mouse Button Pressed The end-user pressed the specified mouse button on the object associated with this event. By selecting the left, middle, or right event type, you can choose to trigger on the left, middle or right mouse button. Normally, Windows users have a two-button mouse (left and right), while Macintosh users use a one-button mouse (left). Macintosh users can use the control key to simulate the right mouse button. </td> </tr> <tr valign="top"> <td width="13%"><img src="glider/ikon5.gif" width="44" height="40"></td> </tr> <tr valign="top"> <td width="13%" height="98"><img src="glider/ikon5.gif" width="44" height="40"></td> </tr> <tr valign="top"> <td width="13%" height="101"><img src="glider/ikon6.gif" width="44" height="39"></td> <td width="87%" height="101"> Keyboard Button Pressed This event occurs when the end-user presses the specified key on the object associated with the event. By double-clicking the Keyboard Button Pressed event, you can define which keys or sequences of keys that should trigger the event. </td> </tr> <tr valign="top"> <td width="13%" height="102"><img src="glider/ikon6.gif" width="44" height="39"></td> <td width="87%" height="102">Keyboard Button Released Works like the Keyboard Button Pressed event, but activates only when the end-user has released the key specified. By double-clicking the Keyboard Button Released event, you can define which keys or sequences of keys that should trigger the event. </td> </tr> <tr valign="top"> <td width="13%" height="48"><img src="glider/ikon7.gif" width="44" height="40"></td> <td width="87%" height="48">Object Motion Completion An object motion action has been completed. </td> </tr> <tr valign="top"> <td width="13%" height="47"><img src="glider/ikon8.gif" width="47" height="36"></td> <td width="87%" height="47">Sound Completion A sound action has been completed. </td> </tr> <tr valign="top"> <td width="13%"><img src="glider/ikon9.gif" width="45" height="38"></td> <td width="87%">Manual This event is what one would call a "dummy" event. The only time it gets triggered is if another event triggers it. </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="470"> <tr> <td colspan="2" valign="top"> For every event there is an options menu that can be popped up with a right-click on the respective event. All new events that are added to the Event Map window are initially set to Initial Activation and Automatic Reset. The options menu lists the settings for the event: </td> <td valign="top" align="right" width="27%"><img src="glider/img7.gif" width="118" height="109"></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="470"> <tr> <td width="26%" valign="top">Initial Activation </td> <td colspan="2" valign="top">An event can only be triggered "by it self" if Initial Activation in the option menu is selected. If you unselect Initial Activation then you have to attach another event that triggers the original event. This is done by connecting the action Activate Event to both events. </td> </tr> <tr valign="top"> <td width="26%">Automatic Reset </td> <td width="74%"> Events can only be triggered when they are in the reset state. All events start out reset, but once triggered they must be reset before they can be triggered again. You can either do an explicit reset with a Reset Event action, or you can set it to automatically reset after it has been triggered by checking the Automatic Reset option in this menu. Example 1: Attach a Left Mouse Button event to an object. Unless Automatic Reset is activated (or the event is explicitly reset with a Reset Event action) the end-user will only be able to trigger it once by clicking. Example 2: If you set a Timer event to trigger a System Beep action after 2000ms, and enable Automatic Reset, then the beep will sound every 2 seconds. </td> </tr> <tr valign="top"> <td width="26%"> Change Name </td> <td width="74%"> Changes the name of the event. </td> </tr> <tr valign="top"> <td width="26%">Collapse Inputs </td> <td width="74%">Collapses the tree of objects and actions to one icon. </td> </tr> <tr valign="top"> <td width="26%">Delete</td> <td width="74%">Deletes the event.</td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" width="50%">Scene Graph-window The Scene Graph window shows a hierarchical view of the data associated with objects and cameras. You can use the Scene Graph to drag object icons to the Event Map in order to define new interactions. </td> <td align="right"><img src="glider/img8.gif" width="210" height="249"></td> </tr> <tr> <td colspan="2"> Preview-window Everything that is done to the object and scene is shown in this window. Here you can try out the scene, just as the end-user will do in a browser window. The Preview window is fully interactive and you can even left-click an object in the scene, and have that object highlighted in the Scene Graph. You can also drag an object directly from the Preview window to the Event Map (by holding down the control key while left-dragging the object). The result is a rendered icon of the object in the Event Map, thus making it much easier to set up complex event maps. The toolbar in the Preview window has four different buttons. <ul> <li>Show Pivot Toggles the display of each object's pivot point (or "center", i.e., the point the object rotates around). </li> <li>Reset Translation and Rotation Resets translation and rotation values of the object to initial values. Very useful if you have been fiddling with the object for a while and want to get back to initial conditions. </li> <li>Toggle Select vs. Rotate-Zoom-Translate When this toolbar button is pressed, you can rotate, zoom, or translate the object by clicking and dragging with the mouse. When the toolbar button is not pressed, clicking with the mouse only affects object selection. </li> </ul> </td> </tr> <tr> <td width="243" align="center">Mouse Button</td> <td width="229" align="center">Resulting Effect</td> </tr> <tr> <td width="243" align="center">Left </td> <td width="229" align="center"> Zoom</td> </tr> <tr> <td width="243" align="center">Left & Right</td> <td width="229" align="center">Translate (move)</td> </tr> <tr> <td width="243" align="center"> </td> <td width="229" align="center"> </td> </tr> <tr> <td colspan="2">Preview Run/Stop Press this button when you want to start the preview session. Press again when you want to stop the session. </td> </tr> <tr> <td valign="top"> Actions-window With Cult3D Designer, you get some pre-made actions. With these you can control your scene and object to your desire. You connect an action to an event, and then connect the selected data (i.e. object, sound, etc.) to the action you want the data to perform. </td> <td align="right"> <img src="glider/img9.gif" width="206" height="186"></td> </tr> <tr> <td valign="top" colspan="2"> Object Properties-window Object property allows you to store data used by your presentation. Each object in the scene has a set of properties associated with it. By opening the Object Properties window and selecting an object, you can view the list of properties currently bound to the object. The window shows three columns, one each for name, initial value, and data type. <img src="glider/img10.gif" width="470" height="203"> Events-window Here are all events in the scene displayed, for another view of your created scene criteria. This lets you manipulate existing events to, for instance, change their types. This is much quicker than deleting the old event, creating a new one to take its place, and finally to reconnect all the connections. If you want to change an event type, you can easily do it here, instead of removing the old event with all it's connections, and then create the new one and connect the old connections to the new one. <img src="glider/img11.gif" width="470" height="190"> </td> </tr> </table> 3.2 Start working with the file Glider.c3d <table border="0" cellspacing="0" cellpadding="0" width="472"> <tr> <td colspan="2"> <img src="glider/Image5.jpg" width="57" height="67">The completed Glider player object as well as all the files used in this tutorial are available in the à\Objects\ directory located in the Cult3D Designer folder. The scene graph includes all the scene data included in the Cult3D Designer file [*.c3d], such as cameras and object information. If the objects are placed in a hierarchy, the hierarchy is shown in the scene graph. An example of a Glider Player object, shown in the Preview window [figure 1] right below, has a scene graph, as shown in [figure 2] left below. </td> </tr> <tr> <td width="51%" valign="top"> <img src="glider/img12.gif" width="210" height="249"></td> <td width="49%"> <img src="glider/img13.gif" width="250" height="261"></td> </tr> <tr> <td width="51%"> We will now define the scene.</td> <td width="49%"> </td> </tr> <tr> <td width="100%" colspan="2">When the specific sub-object is shown in the Event Map, drag that object onto a created event. In the Event Map a connection is shown by a drawn line between the object and the event connected to it. </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="31%" valign="top">1 Grab and drop the event World start to the event map. 2 Grab the sub-object Glider from the scene Graph window and drop it on the event map. 3 Go to Actions window and drag the action Bind Arcball to Event_1. You will find this action under the category Object motion. 4 Drag and drop the object Glider to the action Bind Arcball. </td> <td align="right" valign="top" width="69%"><img src="glider/img14.gif" width="309" height="222"></td> </tr> <tr> <td width="31%" valign="top"> 5 Grab and drop the event Keyboards-Key-Press to the EventMap window. 6 Double click on the Event_2 icon. Select 1 from the translation action detail list and click add. 7 Grab the action Translation and drop it on Event_2. 8 Drag the object Glider to the action Translation. </td> <td align="right" valign="top" width="69%"> <img src="glider/img15.gif" width="309" height="259"></td> </tr> <tr> <td width="31%" valign="top"> 9 Double click on the translation icon. The Translation Action Details window will now appear. 10 Set the value for the X-axis to 3000 and the Performance duration to 50000. Click the OK button. </td> <td align="right" valign="top" width="69%"> <img src="glider/img16.gif" width="309" height="228"></td> </tr> <tr> <td valign="top" colspan="2"> You can now test the Glider by pressing the Preview Run/Stop button in the preview window and pressing the "1" key. The Glider will stop when you release the key. </td> </tr> <tr> <td valign="top" colspan="2"> 11 Grab the event Key-Press-Release and drop it in the Event Map Window. 12 Double click on the Event_3 icon. Select 1 from the translation action detail list and click add. 13 Grab the action Stop Translation and drop it on Event_3. 14 Drag the object Glider to the action Stop Translation. This will stop the animation when you release the "1" key. We will also need a key to reset the Glider. 15 Grab the event Key-Press-Release and drop it in the Event Map Window. 16 Double click on the Event_4 icon. Select 2 from the translation action detail list and click add. 17 Grab the action Reset and drag it to Event_4. 18 Drag the object Glider to the action Reset. 19 Run the animation. Try setting different values for the action Translation. </td> </tr> <tr align="center"> <td valign="top" colspan="2"> The final design may look something like the figure below. <img src="glider/img17.gif" width="439" height="400"> </td> </tr> </table> <a href="tutframe.htm" target="_top"><< BACK </a> </div> <map name="mainmenu"> <area shape="rect" coords="682,6,776,47" href="http://www.cycore.com" target="_blank"> <area shape="rect" coords="569,81,737,106" href="../cdexplorer/index.htm"> <area shape="rect" coords="405,81,509,107" href="../company/index.htm"> <area shape="rect" coords="216,82,331,105" href="../product/index.htm"> <area shape="rect" coords="43,81,150,108" href="../gallery/index.htm"> </map> </body> </html>